<template>
    <el-card>
        <div class="flex mt18 tlc mb20">
            <div class="flex1">灾难时间段：2020-07-21 15:00-17:00</div>
            <div class="flex1">预警时间段：2020-07-21 15:00-17:00</div>
            <div class="flex1">类型：暴雨</div>
            <div class="flex1">地区：北京-丰台区-南京路</div>
            <div class="flex1">预警车辆数：234</div>
            <div class="flex1">避险车辆数：123</div>
        </div>
        <m-map ref="MMap" style="width:100%;height: 800px;" :onLoad="mapInit"></m-map>
    </el-card>
</template>

<script>
    export default {
        name: 'positionDetail',
        data () {
            return {
                maplet: null,
                lon : "123.43317738067627",
                lat : "41.801455072958895",
            }
        },
        created () {
        },
        mounted(){
            this.$nextTick(() => {
                // this.mapInit();
            })
        },
        methods: {
            mapInit (maplet) {
                // 地图初始化和绑定事件
                this.maplet = maplet
                let points =  [
                    new MPoint(123.43317, 41.80645),
                    new MPoint(123.45107, 41.81045),
                    new MPoint(123.46807, 41.83845),
                    new MPoint(123.40447, 41.84845),
                ];
                this.maplet.setZoomLevel(12)
                this.$refs.MMap.makeCircleAreaForLonAndLat(5000,{lon:this.lon,lat:this.lat})
                this.$refs.MMap.drawPolygon({points: points});


                this.maplet.centerAndZoom(new MPoint('123.33317,41.78145'), 8);
                this.$refs.MMap.drawCirlceForLonAndLatAndZoom({lon: '123.32317',lat: '41.75145'},3000)
                this.addOverlays();
            },
           
            addOverlays() {//添加叠加物
                var brush = new MBrush();
                //设置路径箭头样式
                brush.arrow = true, // 路径末尾有箭头
                brush.dmstyle = {
                    color: 'green', //颜色，建议使用16进制
                    size: 30, //尺寸
                    transparency: 60, //透明度
                    strokeWidth: 2, //边框宽度
                    strokeColor: "black", //描边建议使用16进制
                    strokeTransparency: 100 //边框透明度
                };
                var pts = [
                    new MPoint(123.44007, 41.79345),
                    new MPoint(123.46807, 41.79845),
                    new MPoint(123.48837, 41.79345),
                    new MPoint(123.49837, 41.80015),
                    new MPoint(123.49907, 41.80145),
                    new MPoint(123.49937, 41.80245),
                    new MPoint(123.49987, 41.80315),
                    new MPoint(123.49997, 41.80415),
                ];
                var line = new MPolyline(pts, brush);
                //设置路径箭头位置
                line.setDirMark({
                    minLevel: 1, //启用此功能的最小级别。
                    maxLevel: 18,//启用此功能的最大级别。
                    pts: [1, 2, 5,7] //需要显示方向标的坐标数组索引位置，不包括起终点位置
                });
                this.maplet.addOverlay(line);
                this.maplet.setAutoZoom();//设置全览叠加物，将叠加物缩放到合适比例
            }
        }
    }
</script>

<style scoped>
</style>
